<template>
<div class="scrollwarp" :style='{ height }'>
  <div>
    <div class="bigbox">
      <div class="box">
        <div class="one">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <img
                  src="http://shihuo.hupucdn.com/appHome/201901/0909/246bc13aad8b60058a81d242512e983f.png?imageView2/2/w/750/h/380/interlace/1"
                  alt
                />
              </van-swipe-item>
              <van-swipe-item>
                <img
                  src="http://shihuo.hupucdn.com/appHome/201901/0720/18cffc61c52a5ce61173479619bbaa6e.png?imageView2/2/w/750/h/380/interlace/1"
                  alt
                />
              </van-swipe-item>
              <van-swipe-item>
                <img
                  src="http://shihuo.hupucdn.com/appHome/201901/1010/5480e24dc886bde3fd4c599d22330d65.png?imageView2/2/w/750/h/380/interlace/1"
                  alt
                />
              </van-swipe-item>
              <van-swipe-item>
                <img
                  src="http://shihuo.hupucdn.com/appHome/201901/0500/d63108ffbf581d59f8d3552e346b8258.jpg?imageView2/2/w/750/h/380/interlace/1"
                  alt
                />
              </van-swipe-item>
              <van-swipe-item>
                <img
                  src="http://shihuo.hupucdn.com/appHome/201901/0810/e3e9e3e19c8ac46b699f554b3aca7538.jpg?imageView2/2/w/750/h/380/interlace/1"
                  alt
                />
              </van-swipe-item>
          </van-swipe>
          <span class="kuang">
            <Serch :background=background></Serch>
          </span>
          <p><i class="iconfont icon-icon"></i></p>
        </div>

        <div class="two">
          <div class="a1">
            <span>篮球</span>
            <p>纯白系列秒杀</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/def/20181105/2355ddafee2bdc0963e346192576c3631541383761.jpg?imageView2/0/w/160/h/160/interlace/1"
                alt
              />
            </i>
          </div>

          <div class="a2">
            <span>跑步</span>
            <p>纯白系列秒杀</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/def/20180801/a580ec1affbbf4a344974bc92969c7671533133549.jpg?imageView2/0/w/160/h/160/interlace/1"
                alt
              />
            </i>
          </div>

          <div class="a3">
            <span>健身</span>
            <p>纯白系列秒杀</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/trade/reposition/2017-09-08/87e0cc9d598a9ec59fb82de142a7f801.png?imageView2/0/w/160/h/160/interlace/1"
                alt
              />
            </i>
          </div>

          <div class="a4">
            <span>足球</span>
            <p>纯白系列秒杀</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/trade/reposition/2017-09-13/6f2b59787e5a18c4dca091ce9ecb4fae.png?imageView2/0/w/160/h/160/interlace/1"
                alt
              />
            </i>
          </div>

          <div class="a5">
            <span>潮流</span>
            <p>纯白系列秒杀</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/trade/reposition/2017-11-29/7bffa5f42341f0c196db59b9fa89de60.png?imageView2/0/w/160/h/160/interlace/1"
                alt
              />
            </i>
          </div>

          <div class="a6">
            <span>数码</span>
            <p>纯白系列秒杀</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/trade/reposition/2018-01-07/f8adecdd315683a6f3c39aa23c1ea0db.png?imageView2/0/w/160/h/160/interlace/1"
                alt
              />
            </i>
          </div>
        </div>

        <div class="three">
          <div class="b1">
            <span>今日优惠</span>
            <p>EQT 5折好价</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/appHome/201807/1811/1d039f64648d5e33025c747ec6420060.jpg?imageView2/2/w/120/h/120/interlace/1"
                alt
              />
            </i>
          </div>
          <div class="b2">
            <span>限时团购</span>
            <p>春节不打烊</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/appHome/201802/0716/5d0eea37252cd190ba0975b3e5e1f49e.png?imageView2/2/w/120/h/120/interlace/1"
                alt
              />
            </i>
          </div>
          <div class="b3">
            <span>免费抽奖</span>
            <p>识货抽奖，天天免费</p>
            <i>
              <img
                src="http://shihuo.hupucdn.com/kupload2018/2019715/15631798110000.jpeg?imageView2/2/w/120/h/120/interlace/1"
                alt
              />
            </i>
          </div>
        </div>

        <div class="four">
          <div class="c1">热门活动</div>
          <div class="c2">
            <i>
              <img
                src="http://shihuo.hupucdn.com/appHome/201808/1710/5e683699826e2a13abd239e4e4e36793.jpg"
                alt
              />
            </i>
            <span>skullcandy骷髅头耳机</span>
            <p>券后低至89元起</p>
          </div>

          <div class="c3">
            <i>
              <img
                src="http://shihuo.hupucdn.com/appZone/201811/1216/32de94d3d483749627b0716d9cde722b.png"
                alt
              />
            </i>
            <span>数码测评</span>
            <p>全面解析热门数码产品</p>
          </div>

          <div class="c4">
            <i>
              <img
                src="http://shihuo.hupucdn.com/appZone/201811/2310/18c66c0697e87440978ffdc220ee7cf9.jpg"
                alt
              />
            </i>
            <span>潮流折扣日Vol.53</span>
            <p>别再错过专属优惠了</p>
          </div>

          <div class="c5">
            <i>
              <img
                src="http://shihuo.hupucdn.com/appZone/201804/1310/87609edab6d859bb211b0243418109b5.jpg"
                alt
              />
            </i>
            <span>热门资讯</span>
            <p>最新最热门的数码资讯</p>
          </div>

          <div class="c6">
            <i>
              <img
                src="http://shihuo.hupucdn.com/appZone/201807/2411/b9541b36f94bfa8c6c51482e7536eb35.jpg"
                alt
              />
            </i>
            <span>1000块包全身</span>
            <p>不说虚话</p>
          </div>

          <div class="c7">
            <i>
              <img
                src="http://shihuo.hupucdn.com/appZone/201811/1214/7d721a0762b1a4762557aa33c75e6404.jpg"
                alt
              />
            </i>
            <span>好物推荐</span>
            <p>为您推荐潮酷好物</p>
          </div>
        </div>

        <!-- <div class="five">
          <ul>
            <li>推荐</li>
            <li>篮球</li>
            <li>跑步</li>
            <li>健身</li>
            <li>潮流</li>
          </ul>
        </div> -->

        <!-- <div class="six" v-for="item in homelist" :key="item.goods_id">
          <div class="d1">
            <i>
              <img
                :src=item.img
                alt
              />
            </i>
            <h2>{{ item.name }}</h2>
            <span>{{ item.intro }}</span>
            <p>淘宝{{ item.officialPrice }}</p>
          </div>
        </div> -->
      <div class="bottom_"></div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
//引入滚动
import BetterScroll from "better-scroll";
//引入搜索
import Serch from "@/components/Header/Serch"
export default {
  components: {
    Serch
  },
  data() {
    return {
      homelist:[],
      background:{
            background:'rgba(0,0,0,0) !important'
      },
        height:0,
        //滚动对象
        scroll:null,
    };
  },
  mounted() {
    let url = "http://localhost:8080/data/Bshose.json";
    this.$axios.get(url).then((ret) => {
      // console.log(ret);
      this.homelist = ret.data;
      // console.log(this.homelist);
    }),
    //外层滚动容器高度
    this.height = document.documentElement.clientHeight - 51 + 'px'
    // console.log(this.height);
  },
  beforeDestroy(){
    this.scroll = null;
  },
  updated() {
    this.$nextTick(()=>{
      this.scroll = new BetterScroll('.scrollwarp',{
        click: true,
      })
    })
  }
}
</script>

<style lang="scss" >
@import "~@/assets/iconfont/iconfont.css";
.scrollwarp{
    // width: 100%;
    overflow: hidden;
  }
.my-swipe .van-swipe-item {
    height:100%;
}
.box {
  // width: 100%;
  // background: #b2b2b2;
  height: 100%;
  // background: #ccc;
}
.one {
  width: 100%;
  // height: 258px;
  background: white;
  position: relative;
  .kuang {
    width: 300px;
    height: 42px;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 18px;
    z-index: 22;
  }
  p {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 13px;
    top: 12px;
    z-index: 22;
    i{
        font-size:35px;
        color:#fff;

    }
  }
  img {
    width: 100%;
    // height: 258px;
  }
}
.two {
  width: 100%;
  // background: yellow;
  position: relative;
  .a1 {
    width: 49%;
    height: 80px;
    // border: 1px solid black;
    float: left;
    position: relative;
    span {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 5px;
    }
    p {
      font-size: 15px;
      position: relative;
      left: 5px;
      top: 50px;
    }
    i {
      position: absolute;
      top: 10px;
      left: 120px;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .a2 {
    width: 49%;
    height: 80px;
    // border: 1px solid black;
    float: left;
    position: relative;
    span {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 5px;
    }
    p {
      font-size: 15px;
      position: relative;
      left: 5px;
      top: 50px;
    }
    i {
      position: absolute;
      top: 10px;
      left: 120px;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .a3 {
    width: 49%;
    height: 80px;
    // border: 1px solid black;
    float: left;
    position: relative;
    span {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 5px;
    }
    p {
      font-size: 15px;
      position: relative;
      left: 5px;
      top: 50px;
    }
    i {
      position: absolute;
      top: 10px;
      left: 120px;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .a4 {
    width: 49%;
    height: 80px;
    // border: 1px solid black;
    float: left;

    position: relative;
    span {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 5px;
    }
    p {
      font-size: 15px;
      position: relative;
      left: 5px;
      top: 50px;
    }
    i {
      position: absolute;
      top: 10px;
      left: 120px;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .a5 {
    width: 49%;
    height: 80px;
    // border: 1px solid black;
    float: left;
    position: relative;
    span {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 5px;
    }
    p {
      font-size: 15px;
      position: relative;
      left: 5px;
      top: 50px;
    }
    i {
      position: absolute;
      top: 10px;
      left: 120px;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .a6 {
    width: 49%;
    height: 80px;
    // border: 1px solid black;
    float: left;
    position: relative;
    span {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 5px;
    }
    p {
      font-size: 15px;
      position: relative;
      left: 5px;
      top: 50px;
    }
    i {
      position: absolute;
      top: 10px;
      left: 120px;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.three {
  width: 100%;
  height: 150px;
  margin-top: 20px;
  // background: yellow;
  .b1 {
    width: 120px;
    height: 150px;
    // border: 1px solid black;
    float: left;
    margin-left: 2px;
    position: relative;
    span {
      font-size: 15px;
      position: absolute;
      left: 20px;
      top: 20px;
    }
    p {
      font-size: 15px;
      position: absolute;
      left: 20px;
      top: 40px;
    }
    i {
      width: 80px;
      height: 80px;
      position: absolute;
      bottom: 5px;
      left: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .b2 {
    width: 120px;
    height: 150px;
    // border: 1px solid black;
    float: left;
    margin-left: 2px;
    position: relative;
    span {
      font-size: 15px;
      position: absolute;
      left: 20px;
      top: 20px;
    }
    p {
      font-size: 15px;
      position: absolute;
      left: 20px;
      top: 40px;
    }
    i {
      width: 80px;
      height: 80px;
      position: absolute;
      bottom: 5px;
      left: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .b3 {
    width: 120px;
    height: 150px;
    // border: 1px solid black;
    float: left;
    margin-left: 2px;
    position: relative;
    span {
      font-size: 15px;
      position: absolute;
      left: 20px;
      top: 20px;
    }
    p {
      font-size: 15px;
      position: absolute;
      left: 20px;
      top: 40px;
    }
    i {
      width: 80px;
      height: 80px;
      position: absolute;
      bottom: 5px;
      left: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.four {
  width: 100%;
  height: 500px;
  margin-top: 20px;
  // background: yellow;
  margin-bottom: 200px;
  .c1 {
    font-size: 25px;
    // float: left;
    margin-left: 5px;
    margin-top: 5px;
  }
  .c2 {
    width: 120px;
    height: 220px;
    // border: 1px solid black;
    float: left;
    position: relative;
    margin-left: 3px;
    i {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 101px;
      }
    }
    span {
      font-size: 18px;
      position: absolute;
      left: 5px;
      top: 110px;
    }
    p {
      position: absolute;
      left: 5px;
      top: 170px;
    }
  }
  .c3 {
    width: 120px;
    height: 220px;
    // border: 1px solid black;
    float: left;
    position: relative;
    margin-left: 3px;
    i {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 101px;
      }
    }
    span {
      font-size: 18px;
      position: absolute;
      left: 5px;
      top: 110px;
    }
    p {
      position: absolute;
      left: 5px;
      top: 170px;
    }
  }
  .c4 {
    width: 120px;
    height: 220px;
    // border: 1px solid black;
    float: left;
    position: relative;
    margin-left: 3px;
    i {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 101px;
      }
    }
    span {
      font-size: 18px;
      position: absolute;
      left: 5px;
      top: 110px;
    }
    p {
      position: absolute;
      left: 5px;
      top: 170px;
    }
  }
  .c5 {
    width: 120px;
    height: 220px;
    // border: 1px solid black;
    float: left;
    position: relative;
    margin-left: 3px;
    margin-top: 3px;
    i {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 101px;
      }
    }
    span {
      font-size: 18px;
      position: absolute;
      left: 5px;
      top: 110px;
    }
    p {
      position: absolute;
      left: 5px;
      top: 170px;
    }
  }
  .c6 {
    width: 120px;
    height: 220px;
    // border: 1px solid black;
    float: left;
    position: relative;
    margin-left: 3px;
    margin-top: 3px;
    i {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 101px;
      }
    }
    span {
      font-size: 18px;
      position: absolute;
      left: 5px;
      top: 110px;
    }
    p {
      position: absolute;
      left: 5px;
      top: 170px;
    }
  }
  .c7 {
    width: 120px;
    height: 220px;
    // border: 1px solid black;
    float: left;
    position: relative;
    margin-left: 3px;
    margin-top: 3px;
    i {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 101px;
      }
    }
    span {
      font-size: 18px;
      position: absolute;
      left: 5px;
      top: 110px;
    }
    p {
      position: absolute;
      left: 5px;
      top: 170px;
    }
  }
}

.five {
  width: 100%;
  height: 50px;
  // background: yellow;
  border: 1px solid #ccc;

  ul {
    display: flex;
    justify-content: space-around;
    line-height: 50px;
  }
}

.six {
  width: 100%;
  height: 100%;
  .d1 {
    width: 100%;
    height: 180px;
    // background: yellow;
    // margin-top: 20px;
    position: relative;
    i {
      width: 150px;
      height: 180px;
      position: absolute;
      // top: 10px;
      left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h2 {
      font-size: 16px;
      position: absolute;
      left: 180px;
      top: 10px;
    }
    span {
      font-size: 15px;
      position: absolute;
      left: 180px;
      top: 80px;
    }
    p {
      font-size: 16px;
      position: absolute;
      left: 180px;
      bottom: 10px;
    }
  }
}
.bottom_{
  width:100%;
  height:5px;
}
</style>